<template>
  <div class="login-container">
    <h2>中国风音乐平台 - 管理员登录</h2>
    <el-form :model="loginForm" ref="loginForm" label-width="80px">
      <!-- 账号输入框 -->
      <el-form-item label="用户名" prop="name">
        <el-input v-model="loginForm.name" placeholder="请输入账号" style="width: 400px;"></el-input>
      </el-form-item>

      <!-- 密码输入框 -->
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" style="width: 400px;"></el-input>
      </el-form-item>

      <!-- 登录按钮 -->
      <el-form-item>
        <el-button type="primary" @click="login" class="full-width">登录</el-button>
      </el-form-item>
    </el-form>
    <!-- 错误信息显示 -->
    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import router from '@/router/index.js';

export default {
  data() {
    return {
      loginForm: {
        name: '',  // 账号
        password: '',  // 密码
      },
      errorMessage: '',  // 错误信息
    };
  },
  methods: {
    // 登录请求
    async login() {
      var formdata = new FormData();
      formdata.append("name", this.loginForm.name);
      formdata.append("password", this.loginForm.password);

      try {
        const response = await axios.post('http://localhost:8080/admin/right', formdata);
        console.log(response);  // 打印响应内容看看

        // 检查后端返回的登录结果
        if (response.data === 1) {
          // 登录成功，获取用户信息
          const userResponse = await axios.get('http://localhost:8080/admin/g1', {
            params: {
              name: this.loginForm.name
            }
          });
          const admin = userResponse.data;
          localStorage.setItem('admin', JSON.stringify(admin));
          localStorage.setItem('username', this.loginForm.name); // 存储用户名
          ElMessage.success(`欢迎进入管理员页面`);
          router.push('/homepage');
        } else {
          this.errorMessage = '账号或密码错误';
          ElMessage.error('登录失败');
        }
      } catch (error) {
        console.error('登录请求失败:', error);
        this.errorMessage = '服务器连接失败，请稍后再试';
        ElMessage.error('服务器连接失败');
      }
    },
    sendLoginLog(name, password) {
      axios.post('http://localhost:8080/log/logs', {
        name: name,
        password: password,
      }).then(response => {
        console.log('登录日志发送成功', response);
      }).catch(error => {
        console.error('登录日志发送失败', error);
      });
    }
  }
};
</script>

<style scoped>
.login-container {
  width: 500px;
  margin: 100px auto;
  padding: 20px;
  background: #f9f4e8;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  font-family: 'KaiTi', serif; /* 使用中国风字体 */
  text-align: center;
}

h2 {
  font-size: 24px;
  font-weight: bold;
  color: #4b3f33;
  letter-spacing: 2px;
  margin-bottom: 30px;
  font-family: 'KaiTi', serif; /* 中国风字体 */
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); /* 字体阴影效果 */
}

.el-form-item {
  margin-bottom: 20px;
}

.el-button {
  font-size: 16px;
  font-family: 'KaiTi', serif; /* 中国风字体 */
}

.error {
  color: red;
  margin-top: 10px;
  font-size: 14px;
}
</style>